<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>制作树形菜单</title>
    
    <style>
      body {
        font-size: 13px;
        line-height: 20px;
      }
      
      a {
        font-size: 13px;
        color: #000;
        text-decoration: none;
      }
      
      a:hover {
        font-size: 13px;
        color: #F00;
      }
      
      img {
        vertical-align: middle;
        border: 0;
      }
      
      .no_circle {
        list-style: none;
        display: none;
      }
    </style>
  </head>
  
  <body>
    <!--a的href属性需要有内容，否则将跳转-->
    
    <b><img src="static/tree-menu2.gif">树形菜单：</b>
    
    <ul>
      <a href="javascript:clickShow('art')"><img src="static/tree-menu2.gif">文学艺术</a>
    </ul>
    <ul id="art" class="no_circle">
      <li><img src="static/tree-menu1.gif">先锋写作</li>
      <li><img src="static/tree-menu1.gif">小说散文</li>
      <li><img src="static/tree-menu1.gif">诗风词韵</li>
    </ul>
    
    <ul>
      <a href="javascript:clickShow('photo')"><img src="static/tree-menu2.gif">贴图专区</a>
    </ul>
    <ul id="photo" class="no_circle">
      <li><img src="static/tree-menu1.gif">真我风采</li>
      <li><img src="static/tree-menu1.gif">视频贴图</li>
      <li><img src="static/tree-menu1.gif">行行摄摄</li>
      <li><img src="static/tree-menu1.gif">Flash贴图</li>
    </ul>
    
    <ul>
      <a href="javascript:clickShow('home') "><img src="static/tree-menu2.gif">房产论坛</a>
    </ul>
    <ul id="home" class="no_circle">
      <li><img src="static/tree-menu1.gif">我要买房</li>
      <li><img src="static/tree-menu1.gif">楼市话题</li>
      <li><img src="static/tree-menu1.gif">我要卖房</li>
      <li><img src="static/tree-menu1.gif">租房心语</li>
      <li><img src="static/tree-menu1.gif">二手市场</li>
    </ul>
    
    <ul>
      <a href="javascript:clickShow('game')"><img src="static/tree-menu2.gif">娱乐八卦</a>
    </ul>
    <ul id="game" class="no_circle">
      <li><img src="static/tree-menu1.gif">红楼一梦</li>
      <li><img src="static/tree-menu1.gif">笑话论坛</li>
      <li><img src="static/tree-menu1.gif">休闲生活</li>
      <li><img src="static/tree-menu1.gif">大话春秋</li>
    </ul>
  </body>
  
  <script type="text/javascript">
    // 为a元素添加点击事件
    (function (w) {
      var links = document.getElementsByTagName('a');
      for (var i = 0; i < links.length; i++) {
        var ele = links[i];
        ele.onclick = clickShow;//onclick
      }
    })(window);
    
    //点击事件内容
    function clickShow(str) {
      if (document.getElementById(str).style.display == 'block') {
        document.getElementById(str).style.display = 'none';
      } else {
        document.getElementById(str).style.display = 'block';
      }
    }
  
  </script>

</html>